<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue 05</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">{{msg}} {{obj}}
        <p> original: {{rawhtml}}</p>
        <p v-html="rawhtml"></p>
        <div v-bind:class="style">test...</div>
        <p>{{ number + 1 }}</p>
        <p>{{ msg.split("").reverse().join("") }}</p>
    </div>
    <script text="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                msg: "I am coming!",
                obj: new Date(),
                rawhtml: '<span style="color:red">this should be red</span>',
                style: 'red',
                number: 1,
            }
        });
        setInterval(() => {
            app.number++;
            app.obj = new Date();
            app.style = app.number % 2 == 0 ? 'blue' : 'red';
        }, 1000);
    </script>
    <style type="text/css">
        .red {
            color: red;
            font-size: small;
        }

        .blue {
            color: blue;
            font-size: large;
        }
    </style>

</body>